<template>
  <div class="look_build_house">
    <div>
      <title-go-back :title="title"></title-go-back>
    </div>
    <div class="top_img">
      <img src="../../assets/image/look_title.jpg" alt="">
    </div>
    <div>
      <div v-if="lookType === 1">
        <house-list :houseListData="houseBuildData"></house-list>
      </div>
      <div v-if="lookType === 2">
        <new-house-list :newHouseList="houseBuildData"></new-house-list>
      </div>
    </div>
    <div class="form_content">
      <div>
        <div class="label">姓名</div>
        <input class="change_right" placeholder="请输入姓名" type="text" v-model="lookFormData.uname">
      </div>
      <div>
        <div class="label">手机号码</div>
        <input class="change_right" type="number" placeholder="请输入手机号" v-model="lookFormData.phone">
      </div>
      <div>
        <div class="label">预约时间</div>
        <div class="change_right" @click="openPicker">
          <span>{{lookTime}}</span>
          <span class="iconfont icon-icon--"></span>
        </div>
      </div>
    </div>
    <div class="look_build_house_submit">
      <div @click="postReserveHouse">提交</div>
    </div>
    <mt-datetime-picker
      ref="picker"
      type="datetime"
      @confirm="handleConfirm"
      :startDate="startDate">
    </mt-datetime-picker>
  </div>
</template>

<script>
  import {getLookType} from '../../assets/js/cache';
  import TitleGoBack from '../../components/common/TitleGoBack';
  import NewHouseList from '../../components/listComponents/NewHouseList';
  import HouseList from '../../components/listComponents/ListContent';
  import {lookHouse,lookBuild,reserveHouse} from '../../axios/api';
  import Vue from 'vue';
  import moment from 'moment'// 格式化时间
  import {DatetimePicker} from 'mint-ui';
  import { MessageBox } from 'mint-ui';
  Vue.component(DatetimePicker.name, DatetimePicker);
  export default {
    name: 'LookHouseBuild',

    data() {
      return {
        title: '预约看房',
        startDate: new Date(),
        lookType: '',
        lookFormData: {
          uname: '',
          phone: '',
          reserve_time: '',
          type:'',
          ass_id:''
        },
        lookTime:'',
        houseBuildData:[],
      }
    },
    created() {
      this.lookType = getLookType();
      console.log(getLookType());
      this.getLookHouse();
    },
    methods: {
      //表单上传
      postReserveHouse(){
        let that = this;
        that.lookFormData.ass_id = that.$route.params.id;
        that.lookFormData.type = that.lookType;
        reserveHouse(that.lookFormData).then(res=>{
          console.log(res);
          if (res.data.code === 1) {
            // 成功
            MessageBox.alert(res.data.msg).then(action => {
              console.log(action);
              that.lookFormData = {};
              that.lookTime = '';
              that.$router.go(-1);
            });
          }
          else {
            //错误\
            MessageBox.alert(res.data.msg).then(action => {
              console.log(action)
            });
          }
        }).catch(err=>{
          console.log(err);
        })
      },
      //获取单个房源
      getLookHouse(){
        if (this.lookType === 1){
          // 二手房
          lookHouse(this.$route.params.id).then(res=>{
            console.log(res);
            this.houseBuildData = res.data;
          }).catch(err=>{
            console.log(err);
          })
        }
        // 楼盘
       else if (this.lookType === 2){
          lookBuild(this.$route.params.id).then(res=>{
            console.log(res);
            this.houseBuildData = res.data;
          }).catch(err=>{
            console.log(err);
          })
        }
      },
      openPicker() {
        this.$refs.picker.open();
      },
      handleConfirm(data){
        let b = moment(data).format('YYYY-MM-DD HH:mm');
        this.lookTime = b;
        // this.lookFormData.reserve_time = Date.parse(data);
        this.lookFormData.reserve_time = Math.round(data.getTime()/1000);
        console.log(this.lookFormData.reserve_time);
        console.log(this.lookTime);
      }
    },
    components: {TitleGoBack, NewHouseList, HouseList}
  }
</script>

<style scoped>
  .top_img {
    height: 6rem;
    width: 100%;
  }

  .top_img img {
    width: 100%;
    height: 100%;
  }

  .look_build_house .form_content {
    border-top: 10px solid #eeeeee;
    padding: 0 10px;
    border-bottom: 1px solid #eeeeee;
  }

  .look_build_house .form_content > div {
    height: 40px;
    line-height: 40px;
    display: flex;
  }

  .look_build_house .form_content > div:nth-child(2) {
    border-bottom: 1px solid #eeeeee;
    border-top: 1px solid #eeeeee;
  }

  .look_build_house .form_content > div .label {
    /*width: 25%;*/
  }

  .look_build_house input {
    outline: 0;
    border: none;
  }

  .look_build_house .change_right {
    flex: 1;
    text-align: right;
  }

  .look_build_house .look_build_house_submit {
    padding: 50px 10px;
  }

  .look_build_house .look_build_house_submit > div {
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #ffffff;
    background-color: #e6191e;
  }
</style>
